<template>
  <div class="draw-wrap">
    <div class="zoom-wrap">
      <i class="el-icon-remove" @click="zoomChange('sub')"></i>
      <i class="el-icon-circle-plus" @click="zoomChange('add')"></i>
    </div>
    <div id="previewCanvas" class="cavs"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
import {
  modelData,
  g4CellIds,
  g5CellIds,
  d4CellIds,
  d5CellIds,
  cell245Ds,
} from "@/views/model.js";
import { showSubstationFile } from "@/request/api.js";
import { Scroller } from "@antv/x6-plugin-scroller";
export default {
  name: "electDrawList",
  props: {
    model: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      graph: null,
    };
  },
  mounted() {
    this.initGraph();
    this.showSubstationFile();
    // if (this.$route.query) {
    //   this.model.statroomname = this.$route.query.statroomname;
    //   this.model.statroomnumber = this.$route.query.statroomnumber;
    // }
  },
  methods: {
    zoomChange(mark) {
      if (this.graph) {
        let zoom = this.graph.zoom();
        let newZoom = 0;
        let gap = 0.25;
        if (mark == "sub") {
          newZoom = zoom - gap;
        } else {
          newZoom = zoom + gap;
        }
        this.graph.zoomTo(newZoom);
      }
    },
    initGraph() {
      this.graph = new Graph({
        container: document.getElementById("previewCanvas"),
        width: "100%",
        height: "100%",
        selecting: true, // 点选/框选，默认禁用。
        // snapline: true,
        mousewheel: true, //缩放
        panning: {
          //画布是否可以拖拽平移
          enabled: false,
          // modifiers: [],
          // eventTypes: ["leftMouseDown"],
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        interacting: {
          nodeMovable: false,
        },
      });
      this.graph.use(
        new Scroller({
          enabled: true,
          pannable: true,
        })
      );
      let graph = this.graph;
      // graph.fromJSON(drawData);
      this.selectCell();
    },
    // 查看图版信息
    async showSubstationFile() {
      let res = await showSubstationFile({
        statroomnumber: this.model.statroomnumber,
      });
      if (res.code == 200 && res.result.verifyjson) {
        this.model.verifyjson = res.result.verifyjson;
        this.graph.fromJSON(JSON.parse(this.model.verifyjson));
      }
    },
    selectCell() {
      // 节点被选中
      let that = this;
      this.graph.on("cell:click", ({ cell }) => {
        if (that.isCheck) {
          console.log("cell:click", cell);
          if (!cell.data) {
            return;
          }
          // 接地刀闸 合上时断路器刀闸需要全绿
          if (cell.data.type == "接地刀闸") {
            // 如果是开着的，要去合上，要判断刀闸断路器状态
            if (cell.data.state == 2) {
              let index = cell.data.id.indexOf("-");
              let parentId = cell.data.id.slice(0, index);
              let parentCell = this.graph.getCellById(parentId);
              let TDCell = this.graph.getCellById(parentId + "-td");
              let BDCell = this.graph.getCellById(parentId + "-bd");
              if (
                TDCell.data.state != 2 ||
                BDCell.data.state != 2 ||
                parentCell.data.state != 2
              ) {
                this.$message.error("先断开刀闸和断路器才能合上此设备");
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            // modelData[cell.data.type][cell.data.state]
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // 手车断路器 1 2 3 2 1  接地刀闸接地时不能操作手车断路器
          if (cell.data.type == "手车断路器") {
            // let id = cell.data.id;
            // // 有接地刀闸时
            // let childId = id + "-7";
            // let childCell = this.graph.getCellById(childId);
            // // 有接地刀闸且接地时只能开着不能更改
            // if (childCell && childCell.data.state == 1) {
            //   this.$message.warning("接地状态下不能操作此设备");
            //   return;
            // }
            // // 有接地时
            // let childId2 = id + "-d";
            // let childCell2 = this.graph.getCellById(childId2);
            // // 有接地且接地时只能开着不能更改
            // if (childCell2 && childCell2.data.state == 1) {
            //   this.$message.warning("接地状态下不能操作此设备");
            //   return;
            // } else {
            //   let arr = [1, 2, 3, 2];
            //   let index = cell.data.state - 1;
            //   cell.data.state = arr[index + 1];
            //   cell.attr(
            //     "image/xlink:href",
            //     obj[cell.data.state]
            //   );
            //   if (index == 2) {
            //     cell.data.state = 0;
            //   }
            // }
            let arr = [1, 2, 3, 2];
            let index = cell.data.state - 1;
            cell.data.state = arr[index + 1];
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
            if (index == 2) {
              cell.data.state = 0;
            }
          }
          // PT手车
          if (cell.data.type == "PT手车") {
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // 地线 合上时断路器需要全绿
          if (cell.data.type == "地线") {
            // 如果是开着的，要去合上，要判断手车断路器状态
            if (cell.data.state == 2) {
              let index = cell.data.id.indexOf("-");
              let parentId = cell.data.id.slice(0, index);
              let parentCell = this.graph.getCellById(parentId);
              let TDCell = this.graph.getCellById(parentId + "-td");
              let BDCell = this.graph.getCellById(parentId + "-bd");
              // 211和221地线合上时381和382需要先合上再合上211和221后才能合上地线
              if (parentId == "211") {
                let cell = this.graph.getCellById("381");
                if (cell && cell.data.state != 3) {
                  this.$message.error("请先修改381断路器状态");
                  return;
                }
              }
              if (parentId == "221") {
                let cell = this.graph.getCellById("382");
                if (cell && cell.data.state != 3) {
                  this.$message.error("请先修改382断路器状态");
                  return;
                }
              }
              // 如果连着的是断路器
              if (
                parentCell.data.type == "断路器" &&
                parentCell.data.state != 2
              ) {
                this.$message.error("请先修改断路器状态");
                return;
              }
              // 如果只连着刀闸
              if (
                parentCell.data.type == "刀闸" &&
                parentCell.data.state != 2
              ) {
                this.$message.error("请先修改刀闸状态");
                return;
              }
              if (
                TDCell &&
                TDCell.data.type == "刀闸" &&
                TDCell.data.state != 2
              ) {
                this.$message.error("请先修改刀闸状态");
                return;
              }
              if (
                BDCell &&
                BDCell.data.type == "刀闸" &&
                BDCell.data.state != 2
              ) {
                this.$message.error("请先修改刀闸状态");
                return;
              }
              // 如果连着的是手车隔离开关
              if (
                parentCell.data.type == "手车隔离开关" &&
                parentCell.data.state != 2
              ) {
                this.$message.error("请先修改手车隔离开关状态");
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // 手车隔离开关 接地刀闸接地时不能操作手车断路器
          if (cell.data.type == "手车隔离开关" && cell.data.id != "245-5") {
            let id = cell.data.id;
            let childId = id + "-d";
            let childCell = this.graph.getCellById(childId);
            // 有接地且接地时只能开着不能更改
            if (childCell && childCell.data.state == 2) {
              this.$message.warning("接地状态下不能操作此设备");
              return;
            } else {
              cell.data.state = cell.data.state == 1 ? 2 : 1;
              let obj = modelData.get(cell.data.type);
              cell.attr("image/xlink:href", obj[cell.data.state]);
            }
          }
          // g4-d g5-d 245-d接地时不能修改245-5状态
          if (cell.data.id == "245-5") {
            let MXstate = this.getMXstate(cell);
            if (MXstate) {
              return;
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // 刀闸
          if (cell.data.type == "刀闸") {
            let MXstate = this.getMXstate(cell);
            if (MXstate) {
              return;
            }
            // 如果是不带逻辑的刀闸
            let loneDZs = ["48", "58"];
            if (loneDZs.includes(cell.id)) {
              cell.data.state = cell.data.state == 1 ? 2 : 1;
              let obj = modelData.get(cell.data.type);
              cell.attr("image/xlink:href", obj[cell.data.state]);
            }
            // 带逻辑的刀闸-上下刀闸中间断路器
            if (cell.id.includes("-")) {
              let index = cell.data.id.indexOf("-");
              let parentId = cell.data.id.slice(0, index);
              let JDCell = this.graph.getCellById(parentId + "-7");
              // 有接地且接地时只能开着不能更改
              if (JDCell && JDCell.data.state == 1) {
                this.$message.warning("接地状态下不能操作此设备");
                return;
              } else {
                // 如果刀闸是合上的，需要先拉开断路器在拉开刀闸
                if (cell.data.state == 1) {
                  let parentCell = this.graph.getCellById(parentId);
                  if (parentCell.data.state == 1) {
                    this.$message.error("先拉开中间设备才能拉开此设备");
                    return;
                  }
                  cell.data.state = 2;
                } else {
                  cell.data.state = 1;
                }
                let obj = modelData.get(cell.data.type);
                cell.attr("image/xlink:href", obj[cell.data.state]);
              }
            }
            // 带逻辑的刀闸-接地刀闸
            if (cell.data.id == "yjfd") {
              let childId = cell.data.id + "-d";
              let childCell = this.graph.getCellById(childId);
              if (childCell && childCell.data.state == 1) {
                this.$message.warning("接地状态下不能操作此设备");
                return;
              }
              cell.data.state = cell.data.state == 1 ? 2 : 1;
              let obj = modelData.get(cell.data.type);
              cell.attr("image/xlink:href", obj[cell.data.state]);
            }
          }
          // 断路器
          if (cell.data.type == "断路器") {
            let MXstate = this.getMXstate(cell);
            if (MXstate) {
              return;
            }
            let id = cell.data.id;
            let childId = id + "-7";
            let childCell = this.graph.getCellById(childId);
            // 有接地且接地时只能开着不能更改
            if (childCell && childCell.data.state == 1) {
              this.$message.warning("接地状态下不能操作此设备");
              return;
            } else {
              // 断路器开着时 上下刀闸合上时才能合上断路器
              if (cell.data.state == 2) {
                let id = cell.data.id;
                let TDCell = this.graph.getCellById(id + "-td");
                let BDCell = this.graph.getCellById(id + "-bd");
                if (TDCell.data.state != 1 || BDCell.data.state != 1) {
                  this.$message.error("先合上上下刀闸才能合上此设备");
                  return;
                }
                cell.data.state = 1;
              } else {
                cell.data.state = 2;
              }
              let obj = modelData.get(cell.data.type);
              cell.attr("image/xlink:href", obj[cell.data.state]);
            }
          }
          // g4号线接地时需要左边母线上和245-5全绿三个全绿
          if (cell.data.id == "g4-d") {
            if (cell.data.state == 2) {
              let errorFlag = false;
              g4CellIds.forEach((item) => {
                let cell = this.graph.getCellById(item);
                let tdCell = this.graph.getCellById(item + "-td");
                let bdCell = this.graph.getCellById(item + "-bd");
                if (cell && cell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (tdCell && tdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (bdCell && bdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
              });
              if (errorFlag) {
                this.$message.error(
                  `请先断开当前设备所在母线上的所有设备和245-5设备后再操作此设备！`
                );
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // g5号线接地时需要202 245-5 245三个全绿
          if (cell.data.id == "g5-d") {
            if (cell.data.state == 1) {
              let errorFlag = false;
              g5CellIds.forEach((item) => {
                let cell = this.graph.getCellById(item);
                let tdCell = this.graph.getCellById(item + "-td");
                let bdCell = this.graph.getCellById(item + "-bd");
                if (cell && cell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (tdCell && tdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (bdCell && bdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
              });
              if (errorFlag) {
                this.$message.error(
                  `请先断开当前设备所在母线上的所有设备和245设备后再操作此设备！`
                );
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // 245-d接地时需要245-5 245三个全绿
          if (cell.data.id == "245-d") {
            if (cell.data.state == 2) {
              let cell245 = this.graph.getCellById("245");
              let cell2455 = this.graph.getCellById("245-5");
              if (cell245 && cell245.data.state != 2) {
                this.$message.error("请先修改245 245-5断路器状态");
                return;
              }
              if (cell2455 && cell2455.data.state != 2) {
                this.$message.error("请先修改245 245-5断路器状态");
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // d4-d接地时需要345 381全绿
          if (cell.data.id == "d4-d") {
            if (cell.data.state == 2) {
              let errorFlag = false;
              d4CellIds.forEach((item) => {
                let cell = this.graph.getCellById(item);
                let tdCell = this.graph.getCellById(item + "-td");
                let bdCell = this.graph.getCellById(item + "-bd");
                if (cell && cell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (tdCell && tdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (bdCell && bdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
              });
              if (errorFlag) {
                this.$message.error(
                  `请先断开当前设备所在母线上的所有设备后再操作此设备！`
                );
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
          // d5-d接地时需要320 382全绿
          if (cell.data.id == "d5-d") {
            if (cell.data.state == 2) {
              let errorFlag = false;
              d5CellIds.forEach((item) => {
                let cell = this.graph.getCellById(item);
                let tdCell = this.graph.getCellById(item + "-td");
                let bdCell = this.graph.getCellById(item + "-bd");
                if (cell && cell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (tdCell && tdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
                if (bdCell && bdCell.data.state == 1) {
                  errorFlag = true;
                  return;
                }
              });
              if (errorFlag) {
                this.$message.error(
                  `请先断开当前设备所在母线上的所有设备后再操作此设备！`
                );
                return;
              }
            }
            cell.data.state = cell.data.state == 1 ? 2 : 1;
            let obj = modelData.get(cell.data.type);
            cell.attr("image/xlink:href", obj[cell.data.state]);
          }
        }
      });

      this.graph.on("cell:unselected", ({ cell }) => {});
    },
    // 如果当前设备所在母线接地，不能操作当前设备 返回true接地  返回false不接地
    getMXstate(cell) {
      // 母线上的接地线
      let jdCellIds = [
        { id: "g4-d", children: g4CellIds },
        { id: "g5-d", children: g5CellIds },
        { id: "245-d", children: cell245Ds },
        { id: "d4-d", children: d4CellIds },
        { id: "d5-d", children: d5CellIds },
      ];
      if (cell.data.state == 2) {
        // geCellIds里面的设备在g4接地时不能操作
        // 查找当前选中cell所属的接地线
        let id = cell.data.id;
        if (id.includes("-td") || id.includes("-bd")) {
          let length = id.length;
          id = id.slice(0, length - 3);
        }
        let xCellId = "";
        jdCellIds.forEach((item) => {
          if (xCellId) {
            return;
          }
          item.children.forEach((item2) => {
            if (item2 == id) {
              xCellId = item.id;
              console.log("item2 == id", item2, id, xCellId);
              return;
            }
          });
        });
        if (xCellId) {
          console.log(xCellId);
          let xCell = this.graph.getCellById(xCellId);
          console.log("xCell", xCell);
          if (xCell.data.state == 1) {
            this.$message.warning("母线接地状态下不能操作此设备");
            return true;
          }
        }
        // 245 245-5
        if (cell.data.id == "245" || cell.data.id == "245-5") {
          let xCell = this.graph.getCellById("245-d");
          if (xCell && xCell.data.state == 1) {
            this.$message.warning("母线接地状态下不能操作此设备");
            return true;
          }
        }
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .zoom-wrap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    z-index: 9999999999999;
    i {
      font-size: 28px;
      color: rgba(0, 0, 0, 0.8);
    }
  }
}
.cavs {
  display: block;
  left: 0 !important;
  top: 0 !important;
}
</style>
<style>
.x6-graph-scroller-content {
  width: 100% !important;
  height: 100% !important;
}
</style>
